 <gm:page title="At The Movies" authenticate="false" css="resources/movies.css">    

  <script src="resources/movies.js">
   // function setTheaterData(){
   //   var theaterListModule = google.mashups.getObjectById("theaterList");
      //var tdata = google.mashups.getObjectById('sjcList').getData();
  //   var tdata = google.mashups.getObjectById("sjcTheaterData");
     //tdata = theaterListModule.getData();
   // alert(tdata.size());
   //   theaterListModule.setData(tdata);
   // theaterListModule.setPage(0); 
   // }
  </script> 
    
 <div>
    <h1 color="white">AT THE MOVIES</h1>
    
</div>

  <gm:tabs target="theContainer"/>
   <gm:container id="theContainer">
     <gm:section id="sectionInTheaters" title="In Theaters">
      <table>
        <tr>
          <td style="padding-right:20px" valign="top">
           <gm:list id="inTheaterList" data="http://movies.go.com/xml/rss/intheaters.xml"
               pagesize="5" template="movieListTemplate">
              <gm:handleEvent event="select" src="reviewList"/>
           </gm:list>
          </td>
          <td style="padding-right:0px;backgound-color:#B0C4DE" valign="top">
            <gm:list id="topBoxOfficeList" data="http://xml.channel.aol.com/movies/atom/top.xml?type=boxoffice"
                template="topBoxOfficeListTemplate"/>
            <br>
            <gm:list id="topMovieList" data="http://xml.channel.aol.com/movies/atom/top.xml?type=movie"
                template="topMovieListTemplate"/>
          </td>
        </tr>
      </table>
    </gm:section>

    <gm:section id="sectionUpComing" title="Up Coming">
      <gm:list id="upComingList"  data="http://movies.go.com/xml/rss/upcoming.xml" 
               pageSize="10" template="movieListTemplate"/>
    </gm:section>
    <gm:section id="sectionTrailers" title="Trailers">
       <table>
         <tr>
           <td style="padding-right:20px" valign="top">
             <gm:list id="trailerList"  data="http://images.apple.com/trailers/home/rss/newtrailers.rss" 
               pageSize="10" template="trailerListTemplate"/>
           </td>
           <td style="padding-right:0px;backgound-color:#B0C4DE" valign="top">
            <gm:list id="topTrailerList" data="http://xml.channel.aol.com/movies/atom/top.xml?type=trailer"
                template="topTrailerListTemplate"/>
          </td>
         </tr>
       </table>
    </gm:section>
    <gm:section id="sectionNews" title="Movie News">
      <gm:list id="newsList"  data="http://xml.news.aol.com/aolnewsrss.xml?cid=445&feedtype=auto" 
               pageSize="10" template="newsListTemplate"/>
    </gm:section>
    <gm:section id="sectionTheaterLoc" title="Theater Locations">
      <table width="100%">       
        <tr>
        <td style="padding-right:10px;width=20%" valign="top">
           <b>City:</b>
           <select name="select_city" onChange="setTheaterData();">
              <option value ="sfo">San Francisco</option>
              <option value ="sjc">San Jose</option>
              <option value ="oak">Oakland</option>
           </select><br><br>
         
         <gm:list id="theaterList" data="${sfoTheaterData}"
            pagesize="10" template="theaterListTemplate">
          <gm:handleEvent event="select" src="theaterMap"/>
         </gm:list>
        </td>
        <td width="80%" valign="top">
         <gm:map id="theaterMap" style="border:solid black 1px"
            data="${sfoTheaterData}" geolocationref="gmd:location" 
            maptypes="true" control="large"
            zoom="10" lat="37.775" lng="-122.418" 
            infotemplate="theaterMapTemplate">
          <gm:handleEvent event="select" src="theaterList"/>
        </gm:map>
       </td>
      </tr>    
     </table>
    </gm:section>
    
  </gm:container>
  
  <!-- HIDDEN LIST -->
  <gm:list id="reviewList" data="http://movies.go.com/xml/rss/reviews.xml" template="reviewsTemplate" style="display:none"/>
  
  <!-- REVIEWS TEMPLATE --> 
   
  <gm:template id="reviewsTemplate">
    <div repeat="true">
     <b><gm:text ref="atom:title"/></b><br/>
     <gm:text ref="atom:summary"/><br/>
     </div>
  </gm:template>
  
  <!-- MOVIE LIST TEMPLATE: In Theaters, Upcoming -->
  <gm:template id="movieListTemplate">
    <table id="movie_list" class="gray-theme">
      <tr repeat="true">
        <td><b><gm:text ref="atom:title"/></b>
         <p><gm:html class="resource/movie.css" ref="atom:summary"/>
      </tr>
      <tfoot>
        <tr>
          <td align="center"><gm:pager compact="false"/></td>
        </tr>
      </tfoot>
    </table>
  </gm:template>
 
  <!-- TOP BOX OFFICE TEMPLATE -->
  <gm:template id="topBoxOfficeListTemplate">
    <table width="200px" class="gray-theme">
      <thead>
        <tr>
          <td>Top Box Office</td>
        </tr>
      </thead>
      <tr repeat="true">    
         <td><gm:text style="color:#4682B4; font-size:11px;" ref="atom:title"/>
           <br><gm:toggle/><gm:html style="font-size:11px;" ref="atom:content" class="gm-toggled"/>
         </td>
      </tr>
    </table>
  </gm:template>
  
  <!-- TOP MOVIES TEMPLATE -->
  <gm:template id="topMovieListTemplate">
    <table width="200px" class="gray-theme">
      <thead>
        <tr>
          <td>Top Movies</td>
        </tr>
      </thead>
      <tr repeat="true">    
         <td><gm:text style="color:#4682B4; font-size:11px;" ref="atom:title"/>
           <br><gm:toggle/><gm:html style="font-size:11px;" ref="atom:content" class="gm-toggled"/>
         </td>
      </tr>
    </table>
  </gm:template>
  
  <!-- TRAILER LIST TEMPLATE -->
  <gm:template id="trailerListTemplate">
    <table id="trailer_list" class="gray-theme">
      <tr repeat="true">
        <td><b><gm:text ref="atom:title"/></b>
         <p><gm:html class="resource/movie.css" ref="atom:content"/>
      </tr>
      <tfoot>
        <tr>
          <td align="center"><gm:pager compact="false"/></td>
        </tr>
      </tfoot>
    </table>
  </gm:template>
  
  <!-- TOP TRAILER TEMPLATE -->
  <gm:template id="topTrailerListTemplate">
    <table class="gray-theme">
      <thead>
        <tr>
          <td>Top Trailers</td>
        </tr>
      </thead>
      <tr repeat="true">    
         <td><gm:text style="color:#4682B4; font-size:11px;" ref="atom:title"/>
           <br><gm:toggle/><gm:html style="font-size:11px;" ref="atom:content" class="gm-toggled"/>
         </td>
      </tr>
    </table>
    
  </gm:template>
  
    <!-- NEWS LIST TEMPLATE: -->
  <gm:template id="newsListTemplate">
    <table class="gray-theme">
      <tr repeat="true">
        <td><b><gm:text ref="atom:title"/></b>
         <p><gm:html ref="atom:summary"/>
      </tr>
      <tfoot>
        <tr>
          <td align="center"><gm:pager compact="false"/></td>
        </tr>
      </tfoot>
    </table>
  </gm:template>
  <!-- THEATER LOCATION LIST TEMPLATE-->
  <gm:template id="theaterListTemplate">
     <table class="blue-theme">
      <tr repeat="true">
        <td><gm:text ref="atom:title"/></td>
      </tr>
      <tfoot>
        <tr>
          <td align="center"><gm:pager compact="true"/></td>
        </tr>
      </tfoot>
    </table>
  </gm:template>
  <!-- THEATER LOCATION MAP TEMPLATE-->
  <gm:template id="theaterMapTemplate">
     <b><gm:text ref="atom:title"/></b><br/>
     <gm:text ref="gmd:location"/><br/>
  </gm:template>
  
 <!-- THEATER LOCATION DATA-->
 
  <gm:data id="sfoTheaterData">
    <atom:feed>
      <atom:entry>
        <atom:id>1</atom:id>
        <atom:title>AMC Loews Metreon 16 with IMAX</atom:title>
        <gmd:location>101 Fourth Street, San Francisco, CA</gmd:location>
      </atom:entry>
      <atom:entry>
        <atom:id>2</atom:id>
        <atom:title>AMC Van Ness 14</atom:title>
        <gmd:location>1000 Van Ness Avenue, San Francisco, CA</gmd:location>
      </atom:entry>
       <atom:entry>
        <atom:id>3</atom:id>
        <atom:title>Camera 12</atom:title>
        <gmd:location>201 South Second Street, San Jose, CA</gmd:location>
      </atom:entry>
    </atom:feed>
   
  </gm:data>
  
  
    <gm:data id="sjcTheaterData">
    <atom:feed>
       <atom:entry>
        <atom:id>3</atom:id>
        <atom:title>Camera 12</atom:title>
        <gmd:location>201 South Second Street, San Jose, CA</gmd:location>
      </atom:entry>
    </atom:feed>
   
  </gm:data>

</gm:page>











































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































